<template>
    <div>
        <!-- 头部 -->
        <Header></Header>
        <!-- 侧边导航栏 -->
        <SideNavBar></SideNavBar>

        <!-- 内容 -->
        <transition name="moveCartoon" appear>
            <div v-if="validate" style="min-height: calc(100vh - 167px);">
                <router-view :key="$route.fullPath" />
            </div>
            <div v-else style="min-height:100vh">
                <router-view :key="$route.fullPath" />
            </div>
        </transition>

        <!-- 底部 -->
        <Footer v-show="$route.path != '/message'"></Footer>

        <!-- 登录模态框 -->
        <Login></Login>
        <SearchModle></SearchModle>
        <!-- 个人中心 -->
        <User></User>
        <!-- 发表文章 -->
        <ArticleModel></ArticleModel>
        <!-- 侧边栏 -->
        <Sidebar></Sidebar>
    </div>
</template>
<script>
import Header from '@/components/layout/header1.vue'
import SideNavBar from "@/components/layout/SideNavBar.vue";
import SearchModle from "@/components/layout/Search.vue";
import Footer from '@/components/layout/Footer.vue'
import Sidebar from '@/components/layout/Sidebar.vue'
import Login from '@/components/model/Login.vue'
import User from '@/view/user/User.vue'
import ArticleModel from '@/view/article/Article.vue'

export default {
    components: {
        Header,
        Footer,
        Sidebar,
        Login,
        SideNavBar,
        SearchModle,
        User,
        ArticleModel
    },
    methods: {
        validate() {
            return this.$route.path == '/search' || this.$route.path == '/category';
        }
    },
}
</script>
<style scoped>
/* 类名要对应回 name 的属性值 */
.moveCartoon-enter-active {
    animation: move .8s;
}

.moveCartoon-leave-active {
    animation: move .8s reverse;
}

@keyframes move {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translate(0);
    }
}
</style>